<template>
	<view class="content">
		<goods-list :list="goodsList"></goods-list>
		<!-- 头部： -->
		<view class="header">
			<view class="img flexbetween" :style="{backgroundImage:`url(${url_orange})`}">
				<!-- 未登录： -->
				<view class="flexleft header_left" @click="login" v-if="!is_login">
					<view class="img_a">
						<image src="/static/logo.png" mode=""></image>
					</view>
					<view class="header_wenzi flexbetween">
						<view class="name">去登录</view>
						<view class="right_icon1"></view>
					</view>
				</view>
				<!-- 已登录： -->
				<view class="flexleft header_left" @click="message" v-if="is_login">
					<view class="img_a">
						<image :src="userInfo.avatar_text" mode=""></image>
					</view>
					<view class="header_wenzi">
						<view class="flexbetween">
							<view class="name">{{userInfo.nickname}}</view>
							<view class="right_icon1"></view>
						</view>
						<view class="flexleft">
							<view class="header_shenfen margin_right1 flexleft">
								<view class="grey_zi">{{userInfo.mobile}}</view>
							</view>
						</view>
					</view>
					<view class="black_icon" style=""></view>
				</view>
			</view>
			<!-- 余额： -->
			<view class="text recharge orange_border" v-if="Colortype==0">
				<view class="textnav">
					<view class="flexbetween" @click="money">
						<view class="">
							<view class="text_b color_jiu" style="text-align: left;">账户余额</view>
							<view class="margin_top2 money orange_size">{{userInfo.money || "0.00"}}元</view>
						</view>
						<view class="nav_a">
							<view class="margin_top2 pay flexleft orange_bag">
								<view class="" style="margin-right: 23rpx;">提现</view>
								<view class="white_icon"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 绿色 -->
			<view class="text recharge green_border" v-if="Colortype==1">
				<view class="textnav">
					<view class="flexbetween" @click="money">
						<view class="">
							<view class="text_b color_jiu" style="text-align: left;">账户余额</view>
							<view class="margin_top2 money green_size">{{userInfo.money || "0.00"}}元</view>
						</view>
						<view class="nav_a">
							<view class="margin_top2 pay flexleft green_border">
								<view class="" style="margin-right: 23rpx;">提现</view>
								<view class="white_icon"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 蓝色 -->
			<view class="text recharge blue_border" v-if="Colortype==3">
				<view class="textnav">
					<view class="flexbetween" @click="money">
						<view class="">
							<view class="text_b color_jiu" style="text-align: left;">账户余额</view>
							<view class="margin_top2 money blue_size">{{userInfo.money || "0.00"}}元</view>
						</view>
						<view class="nav_a">
							<view class="margin_top2 pay flexleft blue_border">
								<view class="" style="margin-right: 23rpx;">提现</view>
								<view class="white_icon"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 深蓝色 -->
			<view class="text recharge shen_border" v-if="Colortype==2">
				<view class="textnav">
					<view class="flexbetween" @click="money">
						<view class="">
							<view class="text_b color_jiu" style="text-align: left;">账户余额</view>
							<view class="margin_top2 money darkblue_size">{{userInfo.money || "0.00"}}元</view>
						</view>
						<view class="nav_a">
							<view class="margin_top2 pay flexleft shen_bag">
								<view class="" style="margin-right: 23rpx;">提现</view>
								<view class="white_icon"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的订单： -->
		<view class="nav">
			<!-- 顶部标题： -->
			<view class="nav_a flexbetween">
				<view class="nav_my" style="font-size: 32rpx;">我的订单</view>
				<view class="flexleft" @click="lookOrder(0)">
					<view class="look">查看全部订单</view>
					<view class="right_icon"></view>
				</view>
			</view>
			<!--  -->
			<view class="nav_a flexbetween">
				<view class="fukuan_a" @click="lookOrder(1)">
					<image src="/static/image/my/daifh.png" mode="" class="me_dingdan" v-show="Colortype==0"></image>
					<!-- 蓝色 -->
					<image src="/static/image/color/blue_dfh.png" mode="" class="me_dingdan" v-show="Colortype==3">
					</image>
					<!-- 深蓝色 -->
					<image src="/static/image/color/shen_dfh.png" mode="" class="me_dingdan" v-show="Colortype==2">
					</image>
					<!-- 绿色 -->
					<image src="/static/image/color/green_dfh.png" mode="" class="me_dingdan" v-show="Colortype==1">
					</image>
					<view class="nav_text">待发货</view>
				</view>
				<view class="fukuan_a" @click="lookOrder(2)">
					<image src="/static/image/my/daish.png" mode="" class="me_dingdan" v-show="Colortype==0"></image>
					<!-- 蓝色 -->
					<image src="/static/image/color/blue_dsh.png" mode="" class="me_dingdan" v-show="Colortype==3">
					</image>
					<!-- 深蓝色 -->
					<image src="/static/image/color/shen_dsh.png" mode="" class="me_dingdan" v-show="Colortype==2">
					</image>
					<!-- 绿色 -->
					<image src="/static/image/color/green_dsh.png" mode="" class="me_dingdan" v-show="Colortype==1">
					</image>
					<view class="nav_text">待收货</view>
				</view>
				<view class="fukuan_a" @click="lookOrder(3)">
					<image src="/static/image/my/daiqh.png" mode="" class="me_dingdan" v-show="Colortype==0"></image>
					<!-- 蓝色 -->
					<image src="/static/image/color/blue_dqh.png" mode="" class="me_dingdan" v-show="Colortype==3">
					</image>
					<!-- 深蓝色 -->
					<image src="/static/image/color/shen_dqh.png" mode="" class="me_dingdan" v-show="Colortype==2">
					</image>
					<!-- 绿色 -->
					<image src="/static/image/color/green_dqh.png" mode="" class="me_dingdan" v-show="Colortype==1">
					</image>
					<view class="nav_text">待核销</view>
				</view>
				<view class="fukuan_a" @click="lookOrder(4)">
					<image src="/static/image/my/tk.png" mode="" class="me_dingdan" v-show="Colortype==0"></image>
					<!-- 蓝色 -->
					<image src="/static/image/color/blue_tk.png" mode="" class="me_dingdan" v-show="Colortype==3">
					</image>
					<!-- 深蓝色 -->
					<image src="/static/image/color/shen_tk.png" mode="" class="me_dingdan" v-show="Colortype==2">
					</image>
					<!-- 绿色 -->
					<image src="/static/image/color/green_tk.png" mode="" class="me_dingdan" v-show="Colortype==1">
					</image>
					<view class="nav_text">退款</view>
				</view>
			</view>
		</view>
		<!-- 下方列表： -->
		<view class="center" style="margin-bottom: 100rpx;">
			<view class="center_a flexbetween" @click="address">
				<view class="flexleft">
					<view class="lijuan size" v-show="Colortype==0"></view>
					<!-- 绿色 -->
					<view class="green_dizhi size" v-show="Colortype==1"></view>
					<!-- 蓝色 -->
					<view class="blue_dizhi size" v-show="Colortype==3"></view>
					<!-- 深蓝色 -->
					<view class="shen_dizhi size" v-show="Colortype==2"></view>
					<view class="title">地址管理</view>
				</view>
				<view class="right_icon"></view>
			</view>
			<!-- <view class="center_a flexbetween" @click="shenqing">
				<view class="flexleft">
					<view class="shangcheng size" v-show="Colortype==0"></view>
					<view class="green_jxs size" v-show="Colortype==1"></view>
					<view class="blue_jxs size" v-show="Colortype==3"></view>
					<view class="shen_jxs size" v-show="Colortype==2"></view>
					<view class="title">申请经销商</view>
				</view>
				<view class="right_icon"></view>
			</view> -->
			<view class="center_a flexbetween" @click="goCart">
				<view class="flexleft">
					<view class="gw size" v-show="Colortype==0"></view>
					<!-- 绿色 -->
					<view class="green_gw size" v-show="Colortype==1"></view>
					<!-- 蓝色 -->
					<view class="blue_gw size" v-show="Colortype==3"></view>
					<!-- 深蓝色 -->
					<view class="shen_gw size" v-show="Colortype==2"></view>
					<view class="title">购物车</view>
				</view>
				<view class="right_icon"></view>
			</view>
			<view class="center_a flexbetween" @click="invite">
				<view class="flexleft">
					<view class="yaoqing size" v-show="Colortype==0"></view>
					<!-- 绿色 -->
					<view class="green_yq size" v-show="Colortype==1"></view>
					<!-- 蓝色 -->
					<view class="blue_yq size" v-show="Colortype==3"></view>
					<!-- 深蓝色 -->
					<view class="shen_yq size" v-show="Colortype==2"></view>
					<view class="title">邀请中心</view>
				</view>
				<view class="right_icon"></view>
			</view>
			<view class="center_a flexbetween" @click="hexiao" v-if="userInfo.hxy_type==2">
				<view class="flexleft">
					<view class="hx4 size" v-show="Colortype==0"></view>
					<!-- 绿色 -->
					<view class="hx3 size" v-show="Colortype==1"></view>
					<!-- 蓝色 -->
					<view class="hx1 size" v-show="Colortype==3"></view>
					<!-- 深蓝色 -->
					<view class="hx2 size" v-show="Colortype==2"></view>
					<view class="title">核销记录</view>
				</view>
				<view class="right_icon"></view>
			</view>
			<view class="center_a flexbetween" @click="issue">
				<view class="flexleft">
					<view class="jinxiaoshang size" v-show="Colortype==0"></view>
					<!-- 绿色 -->
					<view class="green_fb size" v-show="Colortype==1"></view>
					<!-- 蓝色 -->
					<view class="blue_fb size" v-show="Colortype==3"></view>
					<!-- 深蓝色 -->
					<view class="shen_fb size" v-show="Colortype==2"></view>
					<view class="title">我的发布</view>
				</view>
				<view class="right_icon"></view>
			</view>
			<view class="center_a flexbetween" @click="set">
				<view class="flexleft">
					<view class="shezhi size" v-show="Colortype==0"></view>
					<!-- 绿色 -->
					<view class="green_sz size" v-show="Colortype==1"></view>
					<!-- 蓝色 -->
					<view class="blue_sz size" v-show="Colortype==3"></view>
					<!-- 深蓝色 -->
					<view class="shen_sz size " v-show="Colortype==2"></view>
					<view class="title">设置</view>
				</view>
				<view class="right_icon"></view>
			</view>
		</view>
		<u-modal :show="loshow" :title="lotitle" showCancelButton="true" confirmColor="#ff740e" @cancel="locancel"
			@confirm="loconfirm" confirmText="去登录"></u-modal>
	</view>
</template>

<script>
	import goodsList from "@/components/goodList.vue"
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				url_orange: "https://socialmall.yuntaiqikeji.com/uploads/20230606/efe1de8098ec249b877a25ac8901d288.png",
				url_blue: "https://socialmall.yuntaiqikeji.com/uploads/20230606/41f74f4bbc54a3a9f29deff3ae247ddd.png",
				url_green: "https://socialmall.yuntaiqikeji.com/uploads/20230606/c76b8299b26e2207ca5e0687b906c50e.png",
				url_shen: "https://socialmall.yuntaiqikeji.com/uploads/20230606/89eab192ad5d040d2ccf6bfa440e71e1.png",
				goodsList: [],
				Colortype: 0, //0=褐色,1=绿色,2=深蓝,3=浅蓝
				userInfo: null,
				is_login: false,
			};
		},
		onShareAppMessage: function(options) {
			return {
				title: '工蜂商城',
				imageUrl: '@/static/logo.png',
				path: "pages/index/index?rec_uid=" + uni.getStorageSync("user_id"),
			}
		},
		onShareTimeline: function() {
			return {
				title: '工蜂商城',
				imageUrl: '@/static/logo.png',
				path: "pages/index/index?rec_uid=" + uni.getStorageSync("user_id"),
			}
		},
		onLoad() {
			uni.hideTabBar(); //隐藏tab
			this.Colortype = this.$store.state.type
		},
		onShow() {
			this.is_login = httpRequest.checkIsLogin();
			if (this.is_login) {
				this.getUserInfo()
			} else {
				this.userInfo = null
			}
			console.log(this.$store.state.type, "状态值")
		},
		components: {
			goodsList
		},
		methods: {
			getUserInfo() {
				httpRequest.request('/api/user/index', 'GET', {

				}).then(res => {
					if (res.code == 1) {
						this.userInfo = res.data
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			set() { //设置
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				uni.navigateTo({
					url: "/pages_my/shezhi"
				})
			},
			hexiao() {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				uni.navigateTo({
					url: "/pages_my/hexiaojl"
				})
			},
			issue() { //我的发布
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				uni.navigateTo({
					url: "/pages_my/wodefb"
				})
			},
			goCart() { //购物车
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				uni.navigateTo({
					url: "/pages_my/cart"
				})
			},
			invite() { //邀请中心
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				uni.navigateTo({
					url: "/pages_my/yaoqingzx"
				})
			},
			shenqing() {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				uni.navigateTo({
					url: "/pages_my/shenqingjxs"
				})
			},
			lookOrder(value) { //我的订单
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				uni.navigateTo({
					url: "/pages_my/wodedd?value=" + value
				})
			},
			money() { //账户余额
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				uni.navigateTo({
					url: "/pages_my/zhanghuye"
				})
			},
			message() {

				uni.navigateTo({
					url: "/pages_my/gerenxx"
				})
			},
			address() {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				uni.navigateTo({
					url: "/pages_index/shouhuodz"
				})
			},
			login() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.orange_border {
		border: 1rpx solid #D48B39;
	}

	.shen_border {
		border: 1rpx solid RGBA(29, 85, 125, 1);
	}

	.green_border {
		border: 1rpx solid RGBA(35, 188, 156, 1);
	}

	.blue_border {
		border: 1rpx solid RGBA(35, 144, 209, 1);
	}

	.pay {
		border-radius: 56rpx 56rpx 56rpx 56rpx;
		padding: 12rpx 26rpx 12rpx 43rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}

	.orange_bag {
		background-color: RGBA(215, 144, 64, 1);
	}

	.shen_bag {
		background-color: RGBA(26, 80, 118, 1);
	}

	.green_border {
		background-color: RGBA(35, 188, 156, 1);
	}

	.blue_border {
		background-color: RGBA(35, 144, 209, 1);
	}

	.money {
		font-size: 30rpx;
		font-family: DIN-Bold, DIN;
		font-weight: bold;

	}

	.grey_zi {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.recharge {
		background: rgba(255, 255, 255, 0.33);
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		opacity: 1;
	}

	.text {
		// padding:0 20rpx;
		position: absolute;
		bottom: 10rpx;
		left: 30rpx;
		right: 30rpx;

		.textnav {
			margin: 0 auto;
			//background-image: url("/static/logo.png");
			background-size: 100% 100%;
			padding: 30rpx 30rpx;
		}

		.nav_a {
			text-align: center;
			padding: 0;
		}

		.text_2 {
			font-size: 26rpx;
			color: #666;
		}
	}

	.content {
		background-color: #fafafa;
		min-height: 100vh;
		// padding-bottom: 30rpx;
	}

	// 头部：
	.img {
		width: 750rpx;
		height: 500rpx;
		background-size: 100% 100%;
	}

	.flexleft {
		display: flex;
		align-items: center;
	}

	.header {
		position: relative;
	}

	.header_left {
		width: 100%;
		padding-left: 40rpx;
		box-sizing: border-box;
	}

	.img_a {
		border-radius: 50%;
		width: 110rpx;
		height: 110rpx;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}

	.header_wenzi {
		flex-grow: 1;
		margin-left: 30rpx;
		padding-right: 60rpx;
		color: #fff;
	}

	.name {
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #383736;
	}

	.header_shenfen {
		margin-top: 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		color: #FF7510;

		.shenfen {
			padding: 6rpx 20rpx;
			background-color: #fff;
			border-radius: 6rpx;
			margin-right: 20rpx;
		}
	}

	// 商城订单：
	.nav {
		// position: absolute;
		// top: 290rpx;
		width: 92%;
		box-sizing: border-box;
		margin: 0rpx 30rpx 30rpx;
		padding: 22rpx 35rpx;
		background-color: #fff;
		border-radius: 14rpx;
	}

	.nav_a {
		padding: 22rpx 0rpx 22rpx 0rpx;
	}

	.nav_my {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.look {
		margin-right: 7rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.fukuan_a {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.me_dingdan {
		width: 70rpx;
		height: 60rpx;
		background-size: 100% 100%;
	}

	.nav_text {
		margin-top: 21rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	// 下方列表：
	.center {
		margin: 30rpx;
		padding: 0 35rpx;
		background-color: #fff;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}

	.center_a {
		border-bottom: 1rpx solid #fcfcfc;
		border-top: 1rpx solid #fcfcfc;
	}

	.contactbtn {
		background-color: #fff;
		border: none;
		font-size: 32rpx;
		line-height: 24rpx;
		color: #333;
		height: 78rpx;
		line-height: 78rpx;
		padding: 0 400rpx 0 0;
	}

	.contactbtn::after {
		border: 0;
	}

	.title {
		margin: 40rpx 20rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.duihuanj {
		background-image: url('/static/image/my/dizhi.png');
	}

	.lijuan {
		background-image: url('/static/image/my/dizhi.png');
	}

	.shangcheng {
		background-image: url('/static/image/my/shenq.png');
	}

	.gw {
		background-image: url('/static/image/my/gw.png');
	}

	.yaoqing {
		background-image: url('/static/image/my/yaoq.png');
	}

	.jinxiaoshang {
		background-image: url('/static/image/my/issue.png');
	}

	.shezhi {
		background-image: url('/static/image/my/set.png');
	}

	.size {
		width: 41rpx;
		height: 41rpx;
		background-size: 100% 100%;
	}

	.green_dizhi {
		background-image: url("/static/image/color/green_address.png");
	}

	.shen_dizhi {
		background-image: url("/static/image/color/shen_dz.png");
	}

	.blue_dizhi {
		background-image: url("/static/image/color/blue_address.png");
	}

	// .blue_jxs {
	// 	background-image: url("/static/image/color/blue_jxs.png");
	// }

	// .green_jxs {
	// 	background-image: url("/static/image/color/green_sq.png");
	// }

	// .shen_jxs {
	// 	background-image: url("../../static/image/color/shen_jxs.png");
	// }

	.green_gw {
		background-image: url("/static/image/color/green_gw.png");
	}

	.blue_gw {
		background-image: url("/static/image/color/blue_gw.png");
	}

	.shen_gw {
		background-image: url("/static/image/color/shen_gw.png");
	}

	.green_yq {
		background-image: url("/static/image/color/green_yq.png");
	}

	.blue_yq {
		background-image: url("/static/image/color/blue_yq.png");
	}

	.shen_yq {
		background-image: url("/static/image/color/shen_yq.png");
	}

	.hx4 {
		background-image: url("/static/image/color/hx4.png");
	}

	.hx3 {
		background-image: url("/static/image/color/hx3.png");
	}

	.hx2 {
		background-image: url("/static/image/color/hx2.png");
	}

	.hx1 {
		background-image: url("/static/image/color/hx1.png");
	}

	.green_fb {
		background-image: url("../../static/image/color/green_fabu.png");
	}

	.blue_fb {
		background-image: url("/static/image/color/blue_fb.png");
	}

	.shen_fb {
		background-image: url("../../static/image/color/shen_fb.png");
	}

	.green_sz {
		background-image: url("../../static/image/color/green_shezhi.png");
	}

	.blue_sz {
		background-image: url("/static/image/color/blue_sz.png");
	}

	.shen_sz {
		background-image: url("/static/image/color/shen_sz.png");
	}
</style>